<template>
  <div>
    <img :src="url" alt="" />
    <input type="file" @input="fn" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "",
    };
  },
  methods: {
    fn(e) {
      const file = e.target.files[0]; //获得文件对象
      const src = URL.createObjectURL(file); //  URL.createObjectURL生成预览链接
      //   console.log(src);
      this.url = src; //赋值给src属性
    },
  },
};
</script>

<style>
</style>